<template>
    <ex-dialog
      width="1000px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <template>
          <div class="people_name">客户名称：{{ info.clientName }}</div>
          <div class="formbox">
            <div class="form_item">
                <div class="form_item_label">服务单id：</div>
                <div class="form_item_detail">{{ info.id }}</div>
            </div>
            <div class="form_item">
                <div class="form_item_label">服务项目：</div>
                <div class="form_item_detail">{{ info.serviceItemName }}</div>
            </div>
            <div class="form_item">
                <div class="form_item_label">客户级别：</div>
                <div class="form_item_detail">
                  <!-- <dict-tag :options="levelList" :value="info.clientLevel" /> -->
                  {{ info.clientLevel }}
                </div>
            </div>
            <div class="form_item">
                <div class="form_item_label">服务单更新时间：</div>
                <div class="form_item_detail">{{ info.updateTime }}</div>
            </div>
            <div class="form_item">
                <div class="form_item_label">服务需求说明：</div>
                <div class="form_item_detail">{{ info.description }}</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="detail_name">服务进度</div>
          <div class="schedule_box">
                <div class="schedule_box_l">
                    <p class="link_name">当前服务进度：{{ info.serviceItemLinkRecordName }}</p>
                    <el-steps :active="activeStep" direction="vertical" :space="100" finish-status="success">
                        <el-step title="" :description="item.description" v-for="(item,index) in info.list" :key="index">
                        <template slot="description">
                            <div v-if="item.submitTime!=''">{{item.submitTime}} <span v-if="item.status==3">(驳回)</span></div>
                            <div>{{item.serviceItemLinkName}}({{ item.responsiblePerson==''?item.authorityTypeDict:item.responsiblePerson }})</div>
                            <!-- <div style="margin: 4px 0;">{{item.description}}</div> -->
                            <el-button type="primary" size="mini" v-if="item.submitTime!=''" @click="getServiceItemsLinkDetail(item.id,index)">查看</el-button>
                        </template>
                        </el-step>
                    </el-steps>
                </div>
                <div class="schedule_box_r">
                    <template v-if="linkInfoShow">
                        <div class="schedule_box_r_box" v-if="linkInfo.rejectReason!=''">
                            <span>驳回原因：{{ linkInfo.rejectReason }}</span>
                        </div>
                        <div class="schedule_box_r_box" style="align-items: flex-start;" v-if="linkInfo.description!=''">
                            <div>环节说明：</div>
                            <p style="flex: 1;">{{ linkInfo.description }}</p>
                        </div>
                        <template v-if="info.itemType=='1'">
                          <!-- <div class="schedule_box_r_box" v-if="itemTypeOneIndex==0">
                            <span>发起绑定林客：已发起</span>
                          </div>
                          <div class="schedule_box_r_box" v-if="itemTypeOneIndex==1">
                            <span>确认绑定林客：商户已绑定</span>
                          </div> -->
                          <div class="schedule_box_r_box" v-if="linkInfo.linkerResult!=''">
                            <span>绑定抖音林客结果：</span>
                            <dict-tag :options="linkerResultLs" :value="linkInfo.linkerResult" />
                          </div>
                          <!-- <div class="schedule_box_r_box" v-if="itemTypeOneIndex==2">
                            <span>服务项目：</span>
                            <el-select v-model="linkInfo.serviceItemIdList" placeholder="请选择" multiple filterable :style="{width: inputWidth}" :disabled="true">
                                <el-option v-for="item in serviceItemsOptions" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                          </div> -->
                        </template>
                        <div class="schedule_box_r_box">
                            <span>进度内容：{{ linkInfo.content==''?'未填写':linkInfo.content }}</span>
                        </div>
                        <div class="schedule_box_r_box">
                          <span>上传文件：</span>
                          <span @click="fileUrlOpen" style="cursor: pointer;color: #1890FF;flex: 1;" v-if="linkInfo.fileUrl!=''">{{ linkInfo.fileUrl }}</span>
                          <span v-if="linkInfo.fileUrl==''">未上传</span>
                        </div>
                        <div class="schedule_box_r_box" style="align-items: flex-start;">
                            <span>上传图片：</span>
                            <span v-if="linkInfo.imageUrlList.length==0">未上传</span>
                            <div class="img_detail" v-else>
                                <el-image v-for="(item, index) in linkInfo.imageUrlList" :key="index" fit="cover" class="img_box" :src="item" :preview-src-list="linkInfo.imageUrlList"/>
                            </div>
                        </div>
                        <div class="schedule_box_r_box" style="align-items: flex-start;" v-if="linkInfo.exploreNum!=''">
                            <div>记入服务次数：</div>
                            <p style="flex: 1;">{{ linkInfo.exploreNum }}</p>
                        </div>
                        <template v-if="linkInfo.businessType=='1'&&linkInfo.childBusinessType=='2'">
                          <div class="schedule_box_r_box" >
                            <span style="color:#1890ff">直播排期</span>
                          </div>
                          <div class="schedule_box_r_box" style="margin-left:20px">
                            <span>直播日期：{{linkInfo.liveDay}}</span>
                          </div>
                          <div class="schedule_box_r_box" style="margin-left:20px;align-items:flex-start">
                            <div>直播班次：</div>
                            <div style="flex: 1;">
                              <div v-for="(nav,nIndex) in classesTxtLs" :key="nIndex"><span style="color:#1890ff">{{nIndex+1}}：</span>{{nav.clientName + '/' + nav.startTime + '-' + nav.endTime + '/' + nav.liveRoomName + '/' + nav.liveUserName}}</div>
                            </div>
                          </div>
                        </template>
                        
                        <div class="schedule_box_r_box" v-if="linkInfo.businessType=='1'&&linkInfo.childBusinessType=='3'&&linkInfo.liveStatus!=''">
                            <span>直播结果：{{linkInfo.liveStatus=='1'?'已完成直播':'未完成直播'}}</span>
                            <el-button type="primary" size="small" @click="resultView('watch')" style="margin-left: 10px">点击查看</el-button>
                        </div>
                    </template>
                    <template v-if="formShow">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                            <el-form-item label="环节说明：" prop="" v-if="currentDescription!=''">
                                <span>{{ currentDescription }}</span>
                            </el-form-item>
                            <template v-if="info.itemType=='1'">
                              <!-- <el-form-item label="发起绑定林客：" prop="" v-if="activeStep==0">
                                  <el-radio v-model="radio" label="1">已发起</el-radio>
                              </el-form-item>
                              <el-form-item label="确认绑定林客：" prop="" v-if="activeStep==1">
                                  <el-radio v-model="radio" label="1">商户已绑定</el-radio>
                              </el-form-item> -->
                              <el-form-item label="绑定抖音林客结果：" prop="linkerResult">
                                <el-select v-model="ruleForm.linkerResult" placeholder="请选择" :style="{width: inputWidth}">
                                  <el-option v-for="item in linkerResultLs" :key="item.id" :label="item.value" :value="item.id">
                                  </el-option>
                                </el-select>
                              </el-form-item>
                              <!-- <el-form-item label="服务项目：" prop="serviceItemIdList" v-if="activeStep==2">
                                  <el-select v-model="ruleForm.serviceItemIdList" placeholder="请选择" multiple filterable :style="{width: inputWidth}">
                                    <el-option v-for="item in serviceItemsOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                  </el-select>
                              </el-form-item> -->
                            </template>
                            <el-form-item label="进度内容：" prop="">
                                <el-input type="textarea" placeholder="请输入内容" :rows="5" v-model="ruleForm.content" maxlength="2000" show-word-limit :style="{width: inputWidth}"></el-input>
                            </el-form-item>
                            <el-form-item label="上传文件：" prop="" class="fileUrl_box">
                                <el-upload class="upload-demo" :action="fileaction" :headers="headers" :data="fileData" :limit="1"
                                    :on-success="handleFileChange" :on-remove="handleRemove" :on-exceed="handleExceed" :show-file-list="true" :file-list="fileList">
                                    <el-button type="primary" size="small">上传文件</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="上传图片：" prop="">
                                <ImageUploadMore :limit="10" :fileSize="20" @successImg="getimgList" :value="ruleForm.imageUrlList">
                                </ImageUploadMore>
                            </el-form-item>
                            <el-form-item label="记入服务次数：" prop="exploreNum" v-if="businessType=='2'&&childBusinessType=='2'">
                                <el-input placeholder="请输入计入次数" v-model="ruleForm.exploreNum" :style="{width: inputWidth}"></el-input>
                            </el-form-item>
                            <el-form-item label="直播结果：" prop="" v-if="businessType=='1'&&childBusinessType=='3'">
                              <el-button type="primary" size="small" @click="resultView('add')" v-if="!isFillInFlag">点击填写</el-button>
                              <el-button type="success" size="small" @click="resultView('add')" v-if="isFillInFlag">修改</el-button>
                            </el-form-item>
                            <!-- <el-form-item label="直播排期：" prop=""></el-form-item> -->
                            <p class="form_item_label" style="padding-left: 45px;" v-if="businessType=='1'&&childBusinessType=='2'">直播排期</p>
                            <el-form-item label="" prop="" v-if="businessType=='1'&&childBusinessType=='2'">
                              <el-form-item label="直播日期：" prop="liveDay" label-width="100px" style="margin-bottom: 20px;">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.liveDay" @change="liveDayClick" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 330px;"></el-date-picker>
                              </el-form-item>
                              <el-form-item label="直播班次：" prop="clientScheduleIdList" label-width="100px">
                                <el-select v-model="ruleForm.clientScheduleIdList" placeholder="请选择" multiple filterable style="width: 330px;">
                                  <el-option v-for="item in clientScheduleOptions" :key="item.id" :label="item.clientName + '/' + item.startTime + '-' + item.endTime + '/' + item.liveRoomName + '/' + item.liveUserName" :value="item.id">
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-form-item>
                            <el-form-item label="下一环节责任人：" prop="nextResponsiblePersonId" v-if="nextPeople">
                                <el-select v-model="ruleForm.nextResponsiblePersonId" placeholder="请选择" filterable :style="{width: inputWidth}">
                                  <el-option v-for="item in nextResponsiblePersonIdOptions" :key="item.id" :label="item.name" :value="item.id">
                                  </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </template>
                </div>
            </div>
        </template>
      </div>
      <div class="button_box" v-if="info.status=='1'">
        <el-button type="danger" @click="rejectClick" v-if="!formShow && info.isResponsible=='2'&&activeStep!=0">驳回</el-button>
        <el-button type="primary" @click="completeProgress" v-if="!formShow && info.isResponsible=='2'">完成当前进度</el-button>
        <el-button type="warning" @click="transferView" v-if="!formShow && info.isResponsible=='2'">移交处理人</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" v-if="formShow" :loading="AgreeLoading">确认提交</el-button>
      </div>
      <!-- 驳回弹窗 -->
      <el-dialog width="600px" title="驳回服务进度" :visible.sync="innerVisible" append-to-body>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
          <el-form-item label="驳回原因：" prop="rejectReason">
            <el-input type="textarea" placeholder="请输入内容" :rows="5" v-model="ruleForm.rejectReason" maxlength="100" show-word-limit :style="{width: inputWidth}"></el-input>
          </el-form-item>
        </el-form>
        <div class="button_box">
          <el-button type="primary" @click="refuseForm('ruleForm')" :loading="AgreeLoading">确认提交</el-button>
        </div>
      </el-dialog>
      <!-- 服务单转移 -->
      <el-dialog width="600px" title="服务单转移" :visible.sync="transferVisible" append-to-body :close-on-click-modal="false">
        <el-form :model="transferRuleForm" label-position="left" :rules="rules" ref="transferRuleForm" class="demo-ruleForm">
          <el-form-item label="当前环节:" prop="">
            <span>{{transferInfo.serviceItemLinkName}}</span>
          </el-form-item>
          <el-form-item :label="'将当前环节' + transferInfo.authorityTypeDict + '转移至:'" prop="">
          </el-form-item>
          <el-form-item label="选择负责人:" prop="transferResponsiblePersonId" ref="transferRef">
              <el-select v-model="transferRuleForm.transferResponsiblePersonId" filterable placeholder="请选择" :style="{width: inputWidth}">
                  <el-option v-for="item in transferOption" :key="item.id" :label="item.name + '(' + item.phoneNumber + ')'" :value="item.id"></el-option>
              </el-select>
          </el-form-item>
        </el-form>
        <div class="button_box">
          <el-button type="primary" @click="transferForm('transferRuleForm')" :loading="AgreeLoading">确认提交</el-button>
        </div>
      </el-dialog>
      <!-- 直播结果弹窗 -->
      <LiveResultDialog v-if="dialogVisible" :id="dialogId" :pathType="pathType" :visible.sync="dialogVisible" @success="_handleSuccess">
      </LiveResultDialog>
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    serviceRecordDetail,serviceItemsConfirm,serviceItemsLinkDetail,serviceItemsRefuse,serviceItemsLs,personListV2,getClientLiveWorkforceSelect,
    personList,recordTransfer
  } from "@/api/customer/serviceManage";
  import LiveResultDialog from "./liveResultDialog";
  export default {
    components: {
      Loading,
      LiveResultDialog
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      var checkNum = (rule, value, callback) => {
        var reg = /^[1-9]\d*$/
        if (value === '') {
          callback(new Error('请填写记入服务次数'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入1-999的整数'));
        }else if (value>999) {
          callback(new Error('请输入1-999的整数'));
        }else {
          callback();
        }
      };
      return {
        labelWidth: "110px",
        inputWidth: "420px",
        title: "",
        innerVisible: false,//驳回弹窗
        transferVisible: false,//转移弹窗
        dialogVisible: false,//直播结果弹窗
        loading: false,
        disabled: false,
        AgreeLoading: false,
        radio:'1',
        info:{},//服务信息
        ruleForm: {
          businessId:'',//业务id 
          content:'',//进度内容
          fileUrl:'',//上传文件url
          imageUrlList: [],//上传图片url
          itemLinkRecordId:'',//客户服务环节记录id
          itemRecordId:'',//客户服务记录id
          fileName:'',//文件名称
          rejectReason:'',//驳回原因
          serviceItemIdList:[],//服务项目
          nextResponsiblePersonId:'',//下一环节责任人id
          liveDay:'',//直播日期
          clientScheduleIdList:[],//直播排期id数组
          exploreNum:'',//记入服务次数
          linkerResult:'',//绑定抖音林客结果 1手工绑定、2接口绑定、3未绑定 item_link_record_linker_result
        },
        industryList:[],
        rules: {
          rejectReason: [
            { required: true,message: "请填写驳回原因",trigger: ["change", "bulr"]}
          ],
          serviceItemIdList: [
            { required: true,message: "请选择",trigger: ["change", "bulr"]}
          ],
          nextResponsiblePersonId: [
            { required: true,message: "请选择下一环节责任人",trigger: ["change", "bulr"]}
          ],
          liveDay: [
            { required: true,message: "请选择日期",trigger: ["change", "bulr"]}
          ],
          clientScheduleIdList: [
            { required: true,message: "请选择直播班次",trigger: ["change", "bulr"]}
          ],
          transferResponsiblePersonId: [
            { required: true,message: "请选择责任人",trigger: ["change", "bulr"]}
          ],
          exploreNum: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          linkerResult: [
            { required: true,message: "请选择绑定抖音林客结果",trigger: ["change", "bulr"]}
          ],
        },
        fileList: [],
        fileaction: process.env.VUE_APP_BASE_API + "/common/v1/uploadSetFileName",
        headers: {}, //设置上传文件请求头
        fileData: {},
        levelList:[],//客户级别字典
        activeStep: 1,//当前进度
        formShow: false,
        lastLinkId: '',//上一个环节id
        linkInfo:{},
        linkInfoShow: false,
        itemTypeOneIndex: 0,//绑定林客状态下 点击查看下标值
        serviceItemsOptions:[],
        servingCustomersOptions:[],//服务客户下拉
        businessType:'',//服务环节业务类型 1 直播业务 2短视频类型
        childBusinessType:'',//服务环节子业务类型 直播业务（1无特殊操作事项 2 直播排期 3操作填写直播数据）短视频类型 （1无特殊操作事项 2 填写短视频数量）
        nextPeople: false,//是否有下一环节责任人
        nextPeopleType:'',//下一环节负责人类型
        nextResponsiblePersonIdOptions:[],//下一个环节负责人下拉数组
        clientScheduleOptions:[],//直播班次下拉数组
        classesTxtLs:[],//直播班次回显数据
        transferRuleForm:{ //移交处理人表单
          itemLinkRecordId:'',//客户服务环节记录id
          itemRecordId:'',//客户服务记录id
          transferResponsiblePersonId:'',//转移责任人id
        },
        transferInfo:{},//服务单转移信息
        transferOption:{},//服务单负责人选择下拉
        isFillInFlag: false,//是否已经填写直播结果
        dialogId:'',//填写直播结果id
        pathType:'add',
        currentDescription:'',//当前环节说明
        linkerResultLs:[],//绑定抖音林客结果数组
      };
    },
    computed: {},
    created() {
      this.getDict()
      // this.getPersonListAll()
      // this.getClientScheduleOptions()
      this.getDetail()
    },
    mounted() {
     
    },
    computed: {},
    methods: {
      //获取状态字典
      getDict() {
          var dictType = "bee_client_level,bee_client_tiktok_linke_status";
          this.$getSelectList(dictType)
            .then((res) => {
              this.levelList = res.result[0].dictList
              this.linkerResultLs = res.result[1].dictList
            })
      },
      //获取服务项目
      getServiceItemsLs(){
        serviceItemsLs(this.info.clientId).then(res => {
          this.serviceItemsOptions = res.result
        })
      },
      //获取负责人下拉(查下一个负责人)
      getPersonListAll(){
        let data = {
          type: this.nextPeopleType
        }
        personList(data).then(res => {
          this.nextResponsiblePersonIdOptions = res.result
          this.nextPeople = true
        })
      },
      //获取直播班次下拉
      getClientScheduleOptions(clientScheduleIdList){
        let data = {
          date: this.ruleForm.liveDay
        }
        getClientLiveWorkforceSelect(data).then(res => {
          this.clientScheduleOptions = res.result
          this.ruleForm.clientScheduleIdList = clientScheduleIdList
        })
      },
      //直播日期选择
      liveDayClick(){
        this.getClientScheduleOptions('')
      },
      //获取负责人下拉(根据负责人类型查)
      getPersonList(){
        let data = {
          type: this.transferInfo.authorityType
        }
        personList(data).then(res => {
          this.transferOption = res.result
        })
      },
        //导入文件
      handleFileChange(res, file) {
        if (res.code == 200) {
          this.$message.success('上传成功');
          this.ruleForm.fileUrl = res.result.url
          this.ruleForm.fileName = file.name
        } else {
          setTimeout(() => {
            this.fileList = []
          }, 800)
        }
      },
      //删除文件
      handleRemove() {
        this.ruleForm.fileUrl = ''
        this.fileList = []
      },
      // 文件个数超出
      handleExceed() {
        this.$message.error(`上传文件数量不能超过 1 个,请先删除原有文件!`);
      },
      getimgList(e) { //图片
        if (e != '') {
          this.ruleForm.imageUrlList = e.split(",")
          // this.$refs['ruleForm'].clearValidate(['pictureList']);
        } else {
          this.ruleForm.imageUrlList = []
        }
      },
      //驳回
      rejectClick(){
        this.innerVisible = true
      },
      //移交处理弹窗
      transferView(){
        
        this.getPersonList()
        this.transferVisible = true
        this.$nextTick(()=>{
          this.$refs['transferRuleForm'].resetFields();
        })
      },
      //直播结果填写
      resultView(type){
        this.dialogId = this.info.id
        this.pathType = type
        this.dialogVisible = true
      },
      //获取详情
      getDetail(){
        var id = this.id
        serviceRecordDetail(id).then(res => {
          this.info = res.result
          this.getServiceItemsLs()
          setTimeout(()=>{
            res.result.list.forEach((item,index)=>{
              if(res.result.serviceItemLinkRecordId==item.id){
                
                if(res.result.status=='2'){
                  this.activeStep = res.result.list.length
                }else{
                  this.activeStep = index
                }
                // console.log('this.activeStep',this.activeStep,index)
                if(item.submitTime!=''){
                  this.getServiceItemsLinkDetail(item.id,index)
                }else if(item.submitTime==''&&index!=0){
                  this.lastLinkId = res.result.list[index-1].id
                  this.getServiceItemsLinkDetail(this.lastLinkId,index)
                }
                //判断服务环节类型1 直播业务 2短视频类型
                this.businessType = item.businessType
                this.childBusinessType = item.childBusinessType 
                if(this.businessType=='1'){ //当业务类型为直播业务时处理
                  if(item.childBusinessType=='2'){
                    this.ruleForm.liveDay = item.liveDay
                    if(this.ruleForm.liveDay!=''){
                      this.getClientScheduleOptions(item.clientScheduleIdList)
                    }
                  }
                }
                //判断下一环节是否有负责人
                if(index+1!=res.result.list.length && res.result.list[index+1].responsiblePerson=='' && res.result.list[index+1].responsiblePerson!=undefined){
                  // this.nextPeople = true
                  this.nextPeopleType = res.result.list[index+1].authorityType
                  this.getPersonListAll()
                }
                //服务单转移信息
                this.transferInfo = item
                //判断是否填写直播结果
                this.isFillInFlag = item.fillInFlag
                //当前环节说明回显
                this.currentDescription = item.description
              }
            })
          },50)
        })
      },
      //获取服务流程信息
      getServiceItemsLinkDetail(id,index){
        if(index!=undefined){
          this.itemTypeOneIndex = index
        }
        serviceItemsLinkDetail(id).then(res => {
          this.linkInfo = res.result
          if(res.result.linkerResult!=''){
            this.ruleForm.linkerResult = res.result.linkerResult
          }
          //回显直播排期数据
          
          if(res.result.clientScheduleIdList.length!=0){
            this.classesTxtLs = []
            let data = {
              date: res.result.liveDay
            }
            getClientLiveWorkforceSelect(data).then(response => {
              this.clientScheduleOptions = response.result
              this.clientScheduleOptions.forEach((item)=>{
                this.linkInfo.clientScheduleIdList.map((items)=>{
                  if(item.id==items){
                    this.classesTxtLs.push(item)
                  }
                })
              })
            })
          }
          
          this.formShow = false
          this.linkInfoShow = true
        })
      },
      //打开文件
      fileUrlOpen(){
        window.open(this.linkInfo.fileUrl);
      },
      //完成当前进度按钮
      completeProgress(){
        this.formShow = true
        this.linkInfoShow = false
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            if(this.childBusinessType=='3'&&!this.isFillInFlag){ //判断是否填写直播结果
              this.$message.error('请先填写直播结果')
              return
            }
            this.ruleForm.itemLinkRecordId = this.info.serviceItemLinkRecordId
            this.ruleForm.itemRecordId = this.info.id
            var data = {
              ...this.ruleForm
            }
            this.AgreeLoading = true
            serviceItemsConfirm(data).then(res => {
                this.handleClose()
                this.$message.success('操作成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).catch(()=>{
                this.AgreeLoading = false
              })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      refuseForm(formName) {//驳回
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.ruleForm.itemLinkRecordId = this.info.serviceItemLinkRecordId
            this.ruleForm.itemRecordId = this.info.id
            var data = {
              ...this.ruleForm
            }
            this.AgreeLoading = true
            serviceItemsRefuse(data).then(res => {
                this.handleClose()
                this.$message.success('操作成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).catch(()=>{
                this.AgreeLoading = false
              })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      //服务单转移
      transferForm(formName){
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.transferRuleForm.itemLinkRecordId = this.info.serviceItemLinkRecordId
            this.transferRuleForm.itemRecordId = this.info.id
            var data = {
              ...this.transferRuleForm
            }
            this.AgreeLoading = true
            recordTransfer(data).then(res => {
                this.handleClose()
                this.$message.success('操作成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).catch(()=>{
                this.AgreeLoading = false
              })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      _handleSuccess(e){
        if(e==true){
          this.isFillInFlag = true
        }
        // this.getDetail()
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select,.el-input,.el-cascader{
    width: 400px;
  }
  .main {
    padding: 20px 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
  .el-radio-group{
    display: flex;
    flex-direction: column;
    .el-radio{
      margin-bottom: 14px;
    }
  }
  .people_name{
    margin-bottom: 30px;
    color: #000;
    font-size: 18px;
    font-weight: bold;
  }
  .formbox{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .form_item{
    display: flex;
    margin-bottom: 20px;
    margin-right: 20px;
  }
  .form_item_label{
    color: #606266;
    font-size: 15px;
    font-weight: bold;
  }
  .form_item_detail{
    margin-left: 2px;
    flex: 1;
  }
  .line{
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }
  .detail_name{
    font-size: 18px;
    color: #1890ff;
    margin-bottom: 20px;
  }
  .schedule_box{
    display: flex;
  }
  .schedule_box_l{
    border-right: 1px solid #ddd;
    padding-right: 20px;
    width: 240px;
    box-sizing: border-box;
  }
  .link_name{
    font-size: 15px;
    margin-bottom: 20px;
  }
  .schedule_box_r{
    padding-left: 20px;
    flex: 1;
  }
  .schedule_box_r_box{
    color: #000;
    font-size: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    line-height: 24px;
  }
  ::v-deep .schedule_box_r_box .el-input.is-disabled .el-input__inner {
    background-color: #FFFFFF;
    color: #000;
    border-color: #FFFFFF;
    padding: 0;
  }
  .img_detail{
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
  .img_box{
    width: 100px;
    height: 100px;
    border-radius: 6px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  ::v-deep .fileUrl_box .el-upload-list__item {
    width: 420px;
  }
  ::v-deep.el-select-dropdown__item{
    max-width: 800px !important;
  }
  </style>
  